import 'package:flutter/material.dart';

/*
 *  屏幕中间的弹窗，使用Stack
 */

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('OverLay')),
      body: HomePage2(),
    ),
  ));
}

class HomePage2 extends StatefulWidget {
  const HomePage2({Key? key}) : super(key: key);

  @override
  _HomePage2State createState() => _HomePage2State();
}

class _HomePage2State extends State<HomePage2> {
  bool showToast = false;

  void _showToast() {
    setState(() {
      showToast = true;
    });
  }

  void _hideToast() {
    setState(() {
      showToast = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Column(
          children: [
            Text('data'),
            Text('123'),
            Text('James'),
            ElevatedButton(
                onPressed: () {
                  _showToast();
                },
                child: Text('显示弹窗')),
            ElevatedButton(
                onPressed: () {
                  _hideToast();
                },
                child: Text('隐藏弹窗')),
          ],
        ),
        MyToast(
          show: showToast,
        ),
      ],
    );
  }
}

class MyToast extends StatelessWidget {
  final bool show;

  const MyToast({Key? key, required this.show}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (show) {
      return Align(
        alignment: Alignment.center,
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 20, horizontal: 16),
          child: Text(
            '验证码错误aaaaaaa',
            style: TextStyle(color: Colors.white),
          ),
          decoration: BoxDecoration(
            color: Colors.black87,
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
        ),
      );
    }
    return Container();
  }
}
